<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单结算 - 童书商城</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <link rel="stylesheet" href="./css/home.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/checkout.css">
</head>
<body>
    <!-- 公共头部 -->
    <div id="commonHeader"></div>

    <!-- 主体内容 -->
    <div class="checkout-page">
        <div class="checkout-header">
            <h2>订单结算</h2>
        </div>

        <!-- 收货地址 -->
        <div class="address-section">
            <div class="section-header">
                <h3>收货地址</h3>
                <!-- <button class="add-address-btn">添加新地址</button> -->
            </div>
            <div class="address-list">
                <!-- 地址列表将通过JavaScript动态生成 -->
            </div>
        </div>

        <!-- 商品信息 -->
        <div class="product-section">
            <div class="section-header">
                <h3>商品信息</h3>
            </div>
            <div class="product-list">
                <!-- 商品列表将通过JavaScript动态生成 -->
            </div>
        </div>

        <!-- 支付方式 -->
        <div class="payment-section">
            <div class="section-header">
                <h3>支付方式</h3>
            </div>
            <div class="payment-options">
                <div class="payment-option active" data-method="ONLINE">
                    <i class="layui-icon layui-icon-ok-circle"></i>
                    <span>在线支付</span>
                </div>
                <div class="payment-option" data-method="COD">
                    <i class="layui-icon layui-icon-ok-circle"></i>
                    <span>货到付款</span>
                </div>
            </div>
        </div>

        <!-- 订单备注 -->
        <div class="remark-section">
            <div class="section-header">
                <h3>订单备注</h3>
            </div>
            <div class="remark-input">
                <textarea placeholder="请输入订单备注信息（选填）"></textarea>
            </div>
        </div>

        <!-- 订单汇总 -->
        <div class="order-summary">
            <!-- 订单汇总信息将通过JavaScript动态生成 -->
        </div>
    </div>

    <!-- 公共底部 -->
    <div id="commonFooter"></div>

    <!-- JavaScript 引入 -->
    <script src="./layui/layui.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/header.js"></script>
    <script src="./js/api.js"></script>
    <script src="./js/auth.js"></script>
    <script src="./js/checkout.js"></script>
</body>
</html>